.tab_pane {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.border {
  border: 1px solid #cdcbcb;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);

  .tabs_main {
    padding: 10px;
  }
}

.tabs {
  .navs {
    position: relative;
    display: flex;
    align-items: center;

    .nav_item {
      border-bottom: none;
      cursor: pointer;

      span {
        display: inline-block;
        padding: 15px 20px;
        transition: all 0.3s;
      }
    }

    .border_bottom {
      position: absolute;
      bottom: -2px;
      left: 0;
      height: 2px;
      background-color: #86e0fb;
      transition: all 0.3s;
    }

    &.text {
      border-bottom: 2px solid #f6f6f6;

      span {
      }
    }

    &.card {
      border-bottom: 1px solid #cdcbcb;

      span {
        border: 1px solid #cdcbcb;
        border-right: none;
        border-bottom: none;

        &:last-child {
          border-right: 1px solid #cdcbcb;
        }
      }

      .border_bottom {
        display: none;
      }
    }

    &.border_card {
      background-color: #f5f7fa;
      border-bottom: 1px solid #cdcbcb;

      .nav_item {
        &:nth-child(1) {
          span {
            border-left: none;
          }
        }
      }

      span {
        border-right: 1px solid transparent;
        border-left: 1px solid transparent;
      }

      .border_bottom {
        background-color: #fff;
        transition: none;
      }

      .action {
        color: #86e0fb;
        background-color: #fff;

        span {
          border-right-color: #cdcbcb;
          border-left-color: #cdcbcb;
        }
      }
    }
  }

  .tabs_main {
    position: relative;
    width: 100%;
    height: 100%;
  }
}

.tab_pane {
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
}

.show {
  position: relative;
  display: block;
}

.action {
  color: #86e0fb;
}
